import React, { Component } from 'react'
import { Layout, Menu, Icon } from 'antd'
import { connect } from 'react-redux'
import _ from 'lodash'
import { navgationAction } from '../store/actions/routerAction'
import { withRouter } from 'react-router-dom'
import RouteConfig from '../router/router'

const { Footer, Content, Header, Sider } = Layout

const menus = [
  { title: '首页', url: '/home', icon: 'home' },
  { title: '项目管理', url: '/projectManage', icon: 'appstore' },
  { title: '源产品管理', url: '/productManage', icon: 'tablet' },
  { title: '目标管理', url: '/userManage', icon: 'user' },
  { title: '任务中心', url: '/task', icon: 'form' },
  { title: '统计分析', url: '/statisticsAnalysis', icon: 'profile' }
]

class Nav extends Component {
  constructor(props) {
    super(props)
    this.state = {
      defaultSelectedKeys: '/home'
    }
  }

  componentWillMount() {
    const pathname = this.props.history.location.pathname
    let index = _.findIndex(menus, { url: pathname })
    if (index === -1) index = 0
    this.setState({ defaultSelectedKeys: menus[index].url })
  }
  _menuSelect = e => {
    this.props.history.push(e.key)
  }
  render() {
    const { defaultSelectedKeys } = this.state
    return (
      <Layout style={{ height: '100%' }}>
        <Header style={{ background: '#1890FF', padding: '0 28px' }}>
          <h2 style={{ color: '#fff', fontSize: '20px' }}>
            气象产品信息共享及自动化推送系统
          </h2>
        </Header>
        <Layout>
          <Sider style={{ background: '#fff' }}>
            <Menu
              onClick={this._menuSelect}
              mode="inline"
              defaultSelectedKeys={[defaultSelectedKeys]}
            >
              {menus.map(v => (
                <Menu.Item key={v.url}>
                  <Icon type={v.icon} />
                  {v.title}
                </Menu.Item>
              ))}
            </Menu>
          </Sider>
          <Content style={{ padding: 50, overflow: 'auto' }}>
            <RouteConfig />
          </Content>
        </Layout>
        <Footer style={{ textAlign: 'center', background: '#fff' }} />
      </Layout>
    )
  }
}

export default connect(
  state => ({
    state
  }),
  { navgationAction }
)(withRouter(Nav))
